<template>
	<view>
		<view class="return" @click="toReturn()" style="box-shadow: 1rpx 2rpx 4rpx 2rpx gainsboro;">
			<u-icon name="arrow-left" size="20"></u-icon>
		</view>
		<view class="main">
			<!--显示图片用的标签-->
			<view class="code" v-if="orderNo!=''">
				<!-- <image class="code_view" src="{{imagePath}}" mode="widthFix"></image> -->
				<!-- <canvas class="canvas-code" canvas-id="myQrcode" style="width: 400rpx; height:400rpx;background:#fff; display:block;margin: 0 auto;" /> -->
				<tki-qrcode cid="qrcode1" ref="qrcode" :val="orderNo" :size="size" />
				<view style="margin-top: 10rpx;">券码：{{orderNo}}</view>
			</view>
			<u-cell-group>
				<u-cell title="券名" :value="info.name" />
				<u-cell title="使用开始时间" :value="info.start_time" />
				<u-cell title="使用结束时间" :value="info.end_time" />
				<u-cell title="领取时间" :value="info.receive_time" />
				<u-cell title="使用时间" :value="info.use_time" v-if="info.use_time!=''" />
			</u-cell-group>
		</view>
		<view class="card" v-if="info.use_description!=''">
			<view class="card-tit">使用规则</view>
			<rich-text :nodes="info.use_description"></rich-text>
		</view>
	</view>
</template>

<script>
	import {
		tourMyListDetail
	} from '@/api/apiData.js';
	import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"
	export default {
		components: {
			tkiQrcode
		},
		data() {
			return {
				id: '',
				orderNo: '',
				info: '',
				size: 400, // 二维码大小
			};
		},
		mounted() {

		},
		onLoad(option) {
			this.id = option.id
			this.getdetail()
		},
		methods: {
			async getdetail() {
				const result = await tourMyListDetail({
					record_id: this.id
				})
				if (result.code == 1) {
					this.info = result.data
					this.orderNo = result.data.coupon_no
					setTimeout(() => {
						this.$refs.qrcode._makeCode()
					}, 200)
				}
			},
			toReturn() {
				uni.navigateBack()
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #F3F3F3;
		padding-top: 80rpx;
	}

	.main {
		background: white;
		margin: 20rpx 24rpx;
		border-radius: 8rpx;
	}

	.code {
		text-align: center;
		padding: 40rpx 0;
		border-bottom: dashed 1rpx gainsboro;
	}

	.code image {
		width: 400rpx;
		height: 400rpx;
	}

	.card {
		padding: 30rpx 24rpx;
		background: white;
		margin: 24rpx;
	}

	.card-tit {
		color: #007830;
		font-weight: bold;
	}
</style>